<script setup>
import { findKey } from 'lodash-es';
import { useRouter } from '@/router/index.js';
import { useRequest } from '@/hooks/requestHooks.js';
import { getNewsInfor } from '@/api/index.js';

const infoTypeEnum = {
  newsPolicies: '政策法规',
  newsHotspot: '热点新闻',
  newsIndustry: '行业动态',
};
const [infoList, infoLoading] = useRequest(getNewsInfor, {
  defaultParams: [{ pageNum: 1, pageSize: 6 }],
});

const router = useRouter();
const isQiankun = window.__POWERED_BY_QIANKUN__;
const handleClick = () => {
  if (isQiankun) {
    router.push({ path: '/zhny/em/newsPolicies' });
  }
};
const handleDetail = item => {
  const key = findKey(infoTypeEnum, v => v === item.informationType);
  if (isQiankun) {
    router.push({ path: `/zhny/em/${key}`, query: { id: item.id } });
  }
};
</script>

<template>
  <div class="u-p20 u-base-fg">
    <ul class="u-title20 u-df-spb u-mb20 u-prim-text">
      <li class="u-fs16">资讯信息</li>
      <li class="u-sec-text u-fs14 cursor" style="color: #4f8ecb" @click="handleClick">更多</li>
    </ul>
    <ul v-loading="infoLoading" class="infoList-wrapper">
      <li v-for="(item, idx) in infoList?.rows ?? []" :key="item.id" class="cursor" @click="handleDetail(item)">
        <div class="u-df-st u-fs14">
          <span class="info-icon u-mr10"></span>
          <div class="u-reg-text u-ellipsis u-w100">{{ item?.informationName ?? '--' }}</div>
        </div>
        <div class="u-df-st u-fs14">
          <span class="info-icon u-mr10" style="opacity: 0"></span>
          <span class="u-sec-text">{{ item?.informationCreateTime ?? '--' }}</span>
        </div>
        <div
          class="u-divider-bg u-mt20"
          :class="idx < infoList?.rows?.length - 1 ? 'u-mb20' : null"
          style="height: 1px"
        ></div>
      </li>
    </ul>
  </div>
</template>

<style lang="scss" scoped>
.infoList-wrapper {
  overflow-y: auto;
  height: calc(100% - 40px);
}
.info-icon {
  display: inline-block;
  width: 12px;
  height: 12px;
  background: #87a5bc;
  border-radius: 50%;
  opacity: 0.6;
}
.u-ellipsis {
  overflow: hidden; //超出的文本隐藏
  text-overflow: ellipsis; //溢出用省略号显示
  white-space: nowrap; //溢出不换行
}
</style>
<style lang="scss">
.projInfo-dialog {
  .el-dialog__body {
    height: calc(100vh - 155px);
    max-height: calc(100vh - 155px);
  }
}
</style>
